<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
   var Hello = React.createClass({
        getInitialState: function () {
            return {
                opacity: 1.0
            };
        },
       //在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
       componentDidMount: function () {
           this.timer = setInterval(function () {
               var opacity = this.state.opacity;
               opacity -= 0.05;
               if (opacity < 0.1) {
                   opacity = 1.0;
               }
               this.setState({
                   opacity: opacity
               })
           }.bind(this),100);
       },
       render: function () {
           return (
                <div style={{opacity: this.state.opacity}}>
                    Hello, {this.props.name}
                </div>
           );
       }
   });
    ReactDOM.render(
        <Hello name="张欢"/>,
        document.getElementById('example')
    );
</script>
</body>
</html>